<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>优视雅</title>
		<meta content="优视雅" name="author">
		<meta content="优视雅" name="Copyright">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta content="优视雅" name="description">
		<meta content="优视雅" name="keywords">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/public.css">
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/responsive.css">
		<link rel="shortcut icon" href="images/favorite.ico">
		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/public.js"></script>
		<script src="layer/layer.js"></script>
	</head>

	<body>
		<div class="header">
			<div class="top-nav">
				<div class="j-top-nav main">
					<div class="r">
						<a href="login.html">登录</a> /
						<a href="register.html">注册</a> /
						<a href="order.html">我的订单</a> /
					</div>
				</div>
			</div>
		</div>

		<div class="main" id="submitOrder-box">
			<!--选择收货地址-->
			<h3>选择收货地址</h3>
			<ul class="choose-address">
				<li class="on">
					<p><span class="city">湖北武汉</span> （<span class="user">张三</span>收）</p>
					<p class="address">大件路4号软件大厦B栋102室大件路4号软件大厦B栋102室</p>
					<p>
						<a href="javascript:;" class="edit on">修改</a>
					</p>
				</li>
				<li>
					<p><span class="city">湖北武汉</span> （<span class="user">张三</span>收）</p>
					<p class="address">大件路4号软件大厦B栋102室大件路4号软件大厦B栋102室</p>
					<p>
						<a href="javascript:;" class="edit">修改</a>
					</p>
				</li>
			</ul>
			<div class="choose-newaddress">
				<p class="choose-newaddress-l"><button class="add">使用新地址</button></p>
				<p class="choose-newaddress-r">
					<a href="address.html">管理新地址</a>
				</p>
			</div>

			<h3>确认订单信息</h3>
			<div class="checkOrder-info">
				<div class="checkOrder-th">
					<p class="proName-th">商品</p>
					<p class="singlePrice-th">单价</p>
					<p class="Num-th">数量</p>
					<p class="youhui-th">优惠</p>
					<p class="singleTotal-th">小计</p>
				</div>
				<ul>
					<li>
						<a href="pro_detail.html">
							<div class="pro">
								<img src="images/pro01.jpg">
								<div class="l">
									<p class="proName">莱蔻BB霜裸妆遮瑕强 保湿白皙
										<p><span>颜色：白色</span></p>
								</div>
							</div>
							<p class="price">￥123</p>
							<p class="num">1</p>
							<p class="youhui">0</p>
						</a>
					</li>
				</ul>
				<div class="kuaidi">
					<p class="kuaidi-font">运送方式： 包邮</p>
					<p class="price">￥0.00</p>
				</div>
				<div class="yunfeixian">
					<p class="yunfeixian-l">运费险: <input type="checkbox" class="yunfeixian-inp"><span class="yunfeixian-l-span1">运费险</span></p><span class="yunfeixian-l-span1">$0.3购买</span>
					<p class="price">￥03.00</p>
				</div>
			</div>
			<div class="agin_submit">
				<div class="agin_submit_info">
					<p>实付款：<span class="price">￥9.99</span></p>
					<p>寄送到：大件路4号软件大厦B栋102室大件路4号软件大厦B栋102室</p>
					<p>收货人：<span class="user">张三</span> <span class="tel">1232423434</span></p>
				</div>
			</div>
			<p class="submit-p">
				<a href="" class="submit">提交订单</a>
			</p>
		</div>
		</div>

		<script>
			$(".choose-address li").click(function() {
					var index = $(this).index();
					$(this).addClass("on").siblings().removeClass("on");
					$(".choose-address .edit").removeClass("on").eq(index).addClass("on");
					//console.log($(".choose-address .edit").eq(index))
				})
			var w = $(document).width();
				//弹出一个iframe层
			$('.edit').on('click', function() {
				layer.open({
					type: 1,
					title: '修改地址',
					maxmin: true,
					shadeClose: true, //点击遮罩关闭层
					area: [w * 0.9 + "px", '450px'],
					content: $('#edit_address')
				});
			});
			$('.add').on('click', function() {
				layer.open({
					type: 1,
					title: '添加送货地址',
					maxmin: true,
					shadeClose: true, //点击遮罩关闭层
					area: [w * 0.9 + "px", '450px'],
					content: $('#add_address')
				});
			});
		</script>
	<!--添加送货地址弹窗-->
		<div class="add_address" id="add_address" style="display: none;">
			<div class="">
				<span class="name">添加送货地址</span>
				<form>
					<table cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td class="label_name">收&nbsp;货&nbsp;&nbsp;人：</td>
							<td><input name="user" type="text" class="add_text" style=" width:100px" /><i>*</i></td>
						</tr>
						<tr>
							<td class="label_name">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：</td>
							<td><input name="tel" type="text" class="add_text" style=" width:200px" /></td>
						</tr>
						<tr>
							<td colspan="3">
								<select name="province"></select><select name="city"></select><select name="area"></select>
							</td>
						</tr>
						<tr>
							<td class="label_name">详细地址：</td>
							<td><textarea name="address-info" cols="" rows=""></textarea><i>*</i></td>
						</tr>
						<tr>
							<td class="label_name">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：</td>
							<td><input name="youbian" type="text" class="add_text" style=" width:100px" /><i>*</i></td>
						</tr>
						<tr class="moren_dz" style="color: #999">
							<td class="label_name"></td>
							<td><label><input name="" type="checkbox" value="" />设置为默认地址</label></td>
						</tr>
						<tr>
							<td colspan="2" class="center"><input name="" type="button" value="保存" class="add_dzbtn" /><input name="" type="reset" value="清空" class="reset_btn" /></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		
		<!--修改地址弹窗-->
		<div class="add_address" id="edit_address" style="display: none;">
			<div class="">
				<span class="name">修改送货地址</span>
				<form>
					<table cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td class="label_name">收&nbsp;货&nbsp;&nbsp;人：</td>
							<td><input name="user" type="text" class="add_text" style=" width:100px" /><i>*</i></td>
						</tr>
						<tr>
							<td class="label_name">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：</td>
							<td><input name="tel" type="text" class="add_text" style=" width:200px" /></td>
						</tr>
						<tr>
							<td colspan="3">
								<select name="province1"></select><select name="city1"></select><select name="area1"></select>
							</td>
						</tr>
						<tr>
							<td class="label_name">详细地址：</td>
							<td><textarea name="address-info" cols="" rows=""></textarea><i>*</i></td>
						</tr>
						<tr>
							<td class="label_name">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编：</td>
							<td><input name="youbian" type="text" class="add_text" style=" width:100px" /><i>*</i></td>
						</tr>
						<tr class="moren_dz" style="color: #999">
							<td class="label_name"></td>
							<td><label><input name="" type="checkbox" value="" />设置为默认地址</label></td>
						</tr>
						<tr>
							<td colspan="2" class="center"><input name="" type="button" value="保存" class="add_dzbtn" /><input name="" type="reset" value="清空" class="reset_btn" /></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		
		<script src="js/PCASClass.js"></script>
		<script>
			new PCAS("province", "city", "area");
			new PCAS("province1", "city1", "area1");
		</script>


		<div class="footer">
			<p><span>西雅衣家(中国)商业有限公司</span> 客服电话 <span>400 018 0960</span></p>
		</div>
		<!--回到顶部-->
		<a href="javascript:;" class="toTop"><img src="images/toTop.png"></a>
		
		<!--手机底部-->
		<!--占位，防止被底部遮住-->
		<div class="height1"></div>
		<div class="app_footer">
			<ul>
				<li>
					<a href="javascript:;" onclick="window.history.go(-1)">
						<div class="footer-div">
							<p><img src="images/ico_back.png"></p>
							<p>返回上一级</p>
						</div>
					</a>
				</li>
				<li>
					<a href="index.html">
						<div class="footer-div">
							<p><img src="images/ico_home.png"></p>
							<p>首页</p>
						</div>
					</a>
				</li>
				<li>
					<a href="index.html">
						<div class="footer-div">
							<p><img src="images/ico_zichanbao.png"></p>
							<p>资产包</p>
						</div>
					</a>
				</li>
				<li>
					<a href="user.html">
						<div class="footer-div">
							<p><img src="images/ico_per.png"></p>
							<p>个人中心</p>
						</div>
					</a>
				</li>
				
			</ul>
		</div>


		<script>
			$(".app_footer li").eq(1).addClass("active");
			$(".app_footer li.active img").attr("src", "images/ico_homeFoot.png")
		</script>
	</body>

</html>